<!--
 * @Date: 2023-09-15 16:48:37
 * @LastEditTime: 2023-09-27 15:07:42
 * 介绍:留言
-->
<script lang="ts" setup>
import { apiWkTaskComment } from "@@/api/wk/list";
import { apiWkAddTaskComment, ApiWkAddTaskComment } from "@@/api/wk/index";
import { omitText } from "@@/utils/tools/format";
import { useCrequestListRef } from "@@/components/common/CrequestList";
import useUserinfoStore from "@@/store/useUserinfoStore";
import dayjs from "dayjs";
import { isNonNullStr, contrastAddress } from "@@/utils/tools/is";

const props = defineProps<{
  /**任务id */
  id: number;
  canComment: boolean;
}>();

const userinfoStore = useUserinfoStore();

const form = reactive<ApiWkAddTaskComment.Req>({
  content: "",
  task_id: props.id,
});
const btnLoading = reactive({
  onSubmit: false,
});
const CrequestListRef = useCrequestListRef();
async function onSubmit() {
  btnLoading.onSubmit = true;
  const res = await apiWkAddTaskComment(form);
  btnLoading.onSubmit = false;
  if (!res) return;
  const userinfo = userinfoStore.userinfo;
  CrequestListRef.value?.data.unshift({
    content: form.content,
    user: {
      id: userinfo?.id,
      address: userinfo?.address,
    },
  });
  form.content = "";
}
</script>
<template>
  <Ccard class="comment">
    <h3 class="T-A-C">{{ $t("liu-yan-ban") }}</h3>
    <div class="comment_list">
      <CrequestList
        :api="apiWkTaskComment"
        ref="CrequestListRef"
        :pull-refresh="false"
        :extra-params="[{ id: props.id }]"
        min-height="auto"
      >
        <template #item="{ item }">
          <Ccard bg="var(--C-B3)" class="MT-sm auto-MT-sm" border-style="none">
            <CcopyText :copy-text="item.user.address" class="MT-sm T-S-sm">
              <span
                v-if="contrastAddress(userinfoStore.address, item.user.address)"
              >
                {{ $t("wo") }}
              </span>
              <span v-else>{{ omitText(item.user.address) }}</span>
              ：
            </CcopyText>
            <VanDivider class="MT-sm MB-sm" />
            <van-text-ellipsis
              class="PD-0"
              rows="3"
              :content="item.content"
              :expand-text="$t('zhan-kai')"
              :collapse-text="$t('shou-qi')"
            />
            <div class="T-S-sm T-A-R">
              {{ dayjs(item.created_at).format("YYYY/MM/DD HH:mm") }}
            </div>
          </Ccard>
        </template>
      </CrequestList>
    </div>
    <Rinput
      v-if="canComment"
      v-model="form.content"
      class="comment_input"
      :type="'textarea'"
      :autosize="{ minHeight: 0, maxHeight: 200 }"
      maxlength="256"
      showWordLimit
    >
      <template #button>
        <div class="fill-H">
          <Rbutton
            @click="onSubmit"
            :loading="btnLoading.onSubmit"
            :disabled="!isNonNullStr(form.content)"
            bg="var(--C-LG1)" borderStyle="none"
          >
            {{ $t("liu-yan") }}
          </Rbutton>
        </div>
      </template>
    </Rinput>
  </Ccard>
</template>
<style lang="scss" scoped>
.comment {
  overflow: hidden;
  position: relative;
  .CrequestList {
    max-height: 700rem;
    overflow-y: scroll;
    :deep(.ClistState) > div {
      margin-top: 0;
    }
  }
  .comment_list {
    margin-bottom: 140rem;
  }
  .comment_input {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--gap-xs) var(--gap-sm);
    background-color: var(--C-B3);
  }
}
</style>
